<template>
	<view class="">


		<view class="jyfk">
			<view class="top">
				<text class="title">服务满意度问卷调研</text>
				<text class="xxxx">
					尊贵的用户您好，感谢您能抽出几分钟时间来参加本次答题，我们会根据您的建议，为您提供更好的服务~
				</text>
			</view>
			<view class="bottom">
				<view class="wt">
					<text class="wtt">1.请问您对我们的服务满意么?<text style="color: red;font-size: 18px;">*</text></text>
					<view class="xz">
						<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1"
								:key="index" :label="item.name" :name="item.name" @change="radioChange">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="wen" v-for="(item,index) in wtlist" :key="index">
					<text class="w">{{index+2}}{{item.name}}</text>
					<view class="inp">
						<u--input placeholder="请输入内容" border="surround" v-model="item.value"
							@change="groscchange()"></u--input>
					</view>
				</view>

			</view>
			<view class="tj" @click="submit">
				<u-button type="primary" text="确定" style="margin-top: 8px;"></u-button>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radiovalue1: '',
				value: '',
				wtlist: [{
						name: "请问您对平台的建议？",
						value: ''
					},
					{
						name: "请问如何称呼您？",
						value: ''
					},
					{
						name: "请填写您的联系方式，方便我们及时给您反馈",
						value: ''
					}
				],
				radiolist1: [{
						name: '非常满意',
						disabled: false
					},
					{
						name: '比较满意',
						disabled: false
					},
					{
						name: '一般',
						disabled: false
					},
					{
						name: '比较不满意',
						disabled: false
					},
					{
						name: '非常不满意',
						disabled: false
					}
				],
				isManyi: ""
			}
		},
		methods: {
			groscchange(n) {

			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
				this.isManyi = n
			},
			submit() {
				// console.log(this.radiovalue1);
				// console.log(this.wtlist[0].value);
				// console.log(this.wtlist[1].value);
				// console.log(this.wtlist[2].value);
				if (!this.radiovalue1) {
					// 如果 radiovalue1 为空，给出反馈
					uni.showToast({
						title: '请选择一个选项',
						icon: 'none'
					});
					return // 终止后续操作
				}
				for (let i = 0; i < this.wtlist.length; i++) {
					if (!this.wtlist[i].value) {
						// 如果某个 value 为空，给出反馈
						uni.showToast({
							title: this.wtlist[i].name,
							icon: 'none'
						});
						return; // 终止后续操作
					}
				}

				const {
					id
				} = JSON.parse(uni.getStorageSync("userinfo"))
				this.$http.post("/userFeedback/insert", {


					userId: id,
					satisfactionLevel: this.radiovalue1,
					suggestion: this.wtlist[0].value,
					callName: this.wtlist[1].value,
					contactInformation: this.wtlist[2].value

				}).then(res => {
					console.log("随即", res);
				})


			}

		}
	}
</script>

<style lang="less" scoped>
	.jyfk {
		// padding: 25px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.top {
			margin: 35px;
			// margin-top: 35px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;

			.title {
				font-size: 20px;
				font-weight: bold;
			}

			.xxxx {
				margin-top: 25px;
				font-size: 14px;
				font-weight: 300px;
			}
		}

		.bottom {
			margin: 2px 35px;

			.wt {
				.wtt {
					font-size: 16px;
					font-weight: bold;
				}

				.xz {
					margin-top: 18px;

				}
			}

			.wen {
				margin-top: 18px;

				.w {
					font-size: 16px;
					font-weight: bold;
				}

				.inp {
					margin-top: 18px;
				}
			}
		}

		.tj {
			margin: 8px 35px;
		}
	}
</style>